<template>
  <div class="page_dragg">
    <div class="flex f-ac mb24">
      <h5 class="mr24">拖拽排序</h5>
      <h5 class="link doc" @click="handleDoc">文档</h5>
      <h5 class="click">点击</h5>
    </div>
    <div style="display: flex; flex-wrap: nowrap">
      <div style="margin-right: 20px">
        <draggable
          :list="List"
          :group="group.groupA"
          ghost-class="ghost"
          chosen-class="chosenClass"
          animation="300"
          :move="onMove"
          @start="onStart"
          @end="onEnd"
        >
          <template #item="{ element }">
            <div class="item">
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </div>
      <div>
        <draggable :list="List1"
                   :group="group.groupB"
                   ghost-class="ghost"
                   chosen-class="chosenClass"
                   animation="300"
                   @start="onStart"
                   @end="onEnd">
          <template #item="{ element }">
            <div class="item">
              {{ element.name }}
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
// import { VueDraggableNext as draggable } from 'vue-draggable-next'

import draggable from 'vuedraggable'

const List = reactive([
    { name: 'https://www.tslang.cn/docs/home.html', id: 0 },
    { name: 'https://v3.cn.vuejs.org/guide/introduction.html', id: 1 },
    { name: 'http://www.axios-js.com/zh-cn/docs/', id: 2 },
    { name: 'https://router.vuejs.org/zh/introduction.html', id: 3 },
    { name: 'https://element-plus.gitee.io/zh-CN/guide/design.html', id: 4 },
    { name: 'https://pinia.vuejs.org/introduction.html', id: 5 },
    { name: 'https://vitejs.cn/guide/', id: 6 },
    { name: 'https://echarts.apache.org/handbook/zh/get-started/', id: 7 }
])
const List1 = reactive([
    { name: 'https://www.tslang.cn/docs/home.html', id: 0 },
    { name: 'https://v3.cn.vuejs.org/guide/introduction.html', id: 1 },
    { name: 'http://www.axios-js.com/zh-cn/docs/', id: 2 },
    { name: 'https://router.vuejs.org/zh/introduction.html', id: 3 },
    { name: 'https://element-plus.gitee.io/zh-CN/guide/design.html', id: 4 },
    { name: 'https://pinia.vuejs.org/introduction.html', id: 5 },
    { name: 'https://vitejs.cn/guide/', id: 6 },
    { name: 'https://echarts.apache.org/handbook/zh/get-started/', id: 7 }
])
const group = reactive({
    groupA: {
        name: 'itxst'
    // put: true, //可以拖入
    },
    groupB: {
        name: 'itxst'
    // put: true,
    }
})
// 拖拽开始的事件
const onStart = () => {
    console.log('开始')
}
// 拖拽结束的事件
const onEnd = () => {
    console.log('结束')
}
const handleDoc = () => {
    window.open('https://www.itxst.com/vue-draggable/tutorial.html', '_blank')
}
const onMove = (e: any, event: any) => {
    console.log(e)
    console.log(event)
    // return false
}
onMounted(() => {
    const clickDom = document.querySelector('.click')
    clickDom?.addEventListener('click', () => {
        console.log('123')
    })
})
</script>

<style lang="less" scoped>
.page_dragg {
  .doc {
    color: rgba(6, 51, 116, 0.6);
  }
  .item {
    line-height: 40px;
    box-shadow: 3px 2px 5px gray;
    margin-bottom: 10px;
    padding-left: 12px;
    cursor: pointer;
  }
  .ghost {
    background-color: rgba(75, 145, 242, 0.6);
  }
  .chosenClass {
    background-color: rgba(75, 145, 242, 0.6);
    border: none;
  }
}
</style>
